<template>
    <div>
        <h1>Form 自定义通用组件练习 </h1>
        <ZForm :model="userInfo" :rules='rules' ref="loginFormRef">
            <!-- 用户名 -->
            <ZFormItem label="用户名" prop='username'>
               <ZInput v-model="userInfo.username" placeholder="请输入用户名"></ZInput>
            </ZFormItem>
            <!-- 密码 -->
            <ZFormItem label="密码" prop='password'>
               <ZInput type="password" v-model="userInfo.password" placeholder="请输入密码"></ZInput>
            </ZFormItem>
            <ZFormItem>
                <button @click="login">登录</button>
            </ZFormItem>
        </ZForm>
        <!-- {{userInfo.username}} -->
    </div>
</template>

<script>
import ZForm from "./ZForm";
import ZFormItem from "./ZFormItem";
import ZInput from "./ZInput";
import Notice from "../Notice.vue";
export default {
  data() {
    return {
      userInfo: {
        username: "tom",
        password: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名称" }],
        password: [{ required: true, message: "请输入密码" }]
      }
    };
  },
  components: {
    ZInput,
    ZFormItem,
    ZForm
  },
  methods: {
    login() {
      //进行全局校验
      this.$refs["loginFormRef"].validate(valid => {
        console.log("valid valid valid " + valid);

        const notice = this.$create(Notice, {
          title: "我是小智,请求登录",
          message: valid ? "登录成功!" : "校验失败!",
          duration: 2000
        });
        notice.show();
        // if (valid) {
        //   alert("submit");
        // } else {
        //   console.log("error submit!");
        //   return false;
        // }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>